<template>

	<view class="">
		<view class="page" v-if="list.length">
			<view v-for="(item,index) in list" :key="index" class="list" @click="select(item)">
				<u-tag text="常用门店" v-if="item.tag" mode="light" type="error" style="position: absolute;top: 0;left: 0;">
				</u-tag>

				<view class="u-flex">
					<image :src="item.cover" style="width:200rpx;height: 200rpx;border-radius: 10rpx;"></image>
					<view style="margin-left: 10rpx;width: 500rpx;">
						<view class="u-flex u-row-between">
							<view style="font-weight: bold;font-size: 32rpx;">{{item.storeName}}</view>
							<view style="color: #B9B9B9;">
								<u-icon name="map" color="#B9B9B9" size="28"></u-icon>
								<text>{{item.distance}}</text>
							</view>
						</view>
						<!-- # -->

						<view class=" u-flex-wrap">
							<!-- <view  v-for="(item1,index1) in item.carports" :key="index1" class="u-margin-top-20 u-flex" style="width: 50%;">
								<view  style="display: inline-flex;align-items: center; border-radius: 40rpx 0 0 40rpx; padding: 7rpx 14rpx; " :style="{background:item1.status==1?'#DE492A':'#76B85C',color:'#fff'}" >
									<view class="u-margin-right-10"  >{{index1+1}}</view>
									<image src="/static/whiteCar.png" mode="widthFix" style="width:30rpx;height: 25rpx;"></image>
								</view>
								<view class="u-margin-left-10 u-font-22">
									{{item1.status==2?'装修中':item1.status==0?'空闲中':item1.status==1?`已使用${item1.useTime}`:''}}
								</view>
							</view> -->
							<view v-for="(item1,index1) in item.carports" :key="index1" class="u-margin-top-20 u-flex"
								>
								<view
									style="font-size: 24rpx;border-radius: 10rpx; background:#379BFC;color: #fff;padding: 7rpx 15rpx;">
									{{item1.carportName}}号车位</view>
								<view  :style="{background:item1.status==2?'#F28E07':item1.status==0?'#22AD38':item1.status==1?'#FB0202':item1.status==3?'#b5b5b5':''}"
									style="font-size: 24rpx;border-radius: 10rpx;color: #fff;padding: 7rpx 15rpx;margin-left: 20rpx;">
									{{item1.status==2?'维护中':item1.status==0?'空闲中':item1.status==1?`已使用${item1.useTime}`:item1.status==3?'装修中':''}}</view>

							</view>
						</view>
						<!-- <view style="font-size: 22rpx;color: #fff;display: flex;">
							<view style="background:#379BFC;padding: 7rpx 15rpx;border-radius: 10rpx;">
								车位总数量：{{item.cpNum}}</view>
							<view style="padding: 7rpx 15rpx;border-radius:10rpx;background: #F29100;margin-left: 10rpx;"
								v-if="item.wxCpNum">装修中：{{item.wxCpNum}}</view>
							<view style="padding: 7rpx 15rpx;border-radius:10rpx;margin-left: 10rpx;"
								:style="{background:item.canCpNum===item.cpNum?'#ff4f4f':'#49BD40' }" v-if="!item.wxCpNum">
								使用中：{{item.canCpNum}}</view>
					
						</view> -->
						<view style="font-size: 22rpx;margin-top: 20rpx;">
							<text class="u-margin-right-10">价格:{{item.basePrice}}元/{{item.baseTime}}分钟</text>
							<text>超出：{{item.overPrice}}元/分钟</text>
						</view>
					</view>
				</view>

				<view @click.stop="openmap(item)"
					style="margin-top: 20rpx; border-top:1rpx solid #f1f1f1;color: #909090;padding: 20rpx 0;display: flex;align-items: center;">
					<image src="../../static/daohang.png" style="width: 56rpx;height: 56rpx;"></image>
					<view class="u-margin-left-10 u-line-1">{{item.address}}</view>
				</view>

				<!-- 	
				<view @click.stop="reject"  v-if="item.status==1" style="position: absolute;left: 0;top: 0;width: 100%;
				height: 100%;background: rgba(256,256,256,0.9);z-index: 9;text-align: center;line-height: 250rpx;">
				  
				  <text style="font-size: 35rpx;color: #666;font-weight: bold;">装修中...</text>
				</view> -->

			</view>

			<u-loadmore :status="status" :load-text="loadText" />
		</view>
		<view v-if="!list.length">
			<image :src="imagesurl+'app/images/nodoors.png'" style="height: 100vh;width: 100%;"></image>
			<!-- <view @click="call"
				style="position: fixed;bottom: 0;z-index: 999;left: 50%;transform: translate(-50%);bottom: 200rpx;  width: 650rpx;line-height: 40rpx;  border-radius:20rpx;background: linear-gradient(#F9FFFF,#C4FAFF);color: #7D8C8C;padding: 20rpx;box-sizing: border-box;">
				您附近{{areaSerach}}公里还没有车小吉共享自助洗车店铺哦,还有开店的机会，请尽快<text style="color: #FD5030;">4006001995</text>拨打咨询吧！
			</view> -->
		</view>

		<view class="bottomFixs" @click="add" v-if="list.length">我要充值</view>



		<u-action-sheet :list="mode" v-model="show" @click="clickmode"></u-action-sheet>
	</view>


</template>

<script>
	import baseUrl from '../../common/baseUrl';
	const app = getApp()
	export default {
		data() {
			return {
				mode: [{
					text: '绑定车牌'
				}, {
					text: '导航'
				}],
				imagesurl: baseUrl.imageUrl,
				currentData: '',
				show: false,
				list: [],

				page: 1,
				status: 'loadmore',
				areaSerach: "",
				loadText: {
					nomore: '20公里内没有更多门店了',
					loadmore: '轻轻上拉',
					loading: '努力加载中',
				},
				isall: false,
			}
		},
		async onLoad(options) {
			if (options.isall) {
				this.isall = options.isall
			}
			await this.jiazai()
			this.getConfig()
			this.oftenStore()

		},
		onShow() {
			app.getlocation()
		},
		onReachBottom() {
			if (this.status == 'nomore') {

			} else {
				this.jiazai()
			}

		},
		methods: {
			reject() {
				this.$u.toast("店铺升级中")
			},


			getConfig() {
				this.$u.api.getConfig().then(res => {


					this.areaSerach = res.areaSerach


				}).catch(err => {

				})
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: "4006001995"
				})
			},
			clickmode(e) {

				if (e) {
					this.openmap(this.currentData)
				} else {
					uni.navigateTo({
						url: "/pages/bindCar/index"
					})
				}
			},
			oftenStore() {
				this.$u.post('/api/index/oftenStore', {
					lat: this.$store.state.location.lat ? this.$store.state.location.lat : 0,
					lng: this.$store.state.location.lng ? this.$store.state.location.lng : 0,
					page: this.page,
				}).then(res => {
					res.forEach(item => {
						item.tag = 1
					})
					var arr = [...res, ...this.list]
					this.list = arr
					console.log(this.list)
				}).catch(err => {

				})
			},
			select(item) {

				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let prevPage = pages[pages.length - 2]; //上一页页面实例

				if (!prevPage) {
					this.show = true;
					this.currentData = item
					return
				}
				if (prevPage.route == "pages/account/index") {
					if (item.status == 1) {
						this.$u.toast("该店铺正在维修中~")
						return
					}
					prevPage.$vm.storeid = item.id; //修改上一页面的 couponNumber 参数值为 value
					prevPage.$vm.address = item.storeName;

					uni.navigateBack({
						delta: 1
					})
				} else {


					// this.$u.post('/api/user/cn', {}).then(res => {
					// 	if (res.length) {
					// 		uni.navigateTo({
					// 			url: "./detail?id=" + item.id + '&isall=' + this.isall
					// 		})
					// 	} else {
					// 		this.show = true;
					// 		this.currentData = item
					// 	}

					// }).catch(err => {})


					if (this.isall) {
						uni.navigateTo({
							url: "./detail?id=" + item.id + '&isall=' + this.isall
						})
					} else {
						this.show = true;
						this.currentData = item
					}


				}
			},
			add() {
				uni.navigateTo({
					url: "../../pages/account/index"
				})
			},
			jiazai() {
				console.log(this.$store)
				this.$u.post('/api/index/store', {
					lat: this.$store.state.location.lat ? this.$store.state.location.lat : 0,
					lng: this.$store.state.location.lng ? this.$store.state.location.lng : 0,
					// lat:"37.438545",
					// lng:"118.496263",
					page: this.page,
				}).then(res => {
					var resList = res;
					if (this.page == 1) {
						this.list = []
					}
					if (resList.length > 9) {
						this.status = 'loadmore'
						this.page = this.page + 1
					} else {
						this.status = 'nomore'
					}
					this.list = this.list.concat(resList)
					this.loading = false
				}).catch(err => {

				})
			},
			openmap(item) {

				var lat = item.lat
				var lng = item.lng
				var name = item.storeName

				uni.openLocation({
					latitude: Number(lat),
					longitude: Number(lng),
					name: name

				})
			}

		}
	}
</script>

<style>
	.page {
		background: #F1F1F1;
		padding-bottom: 120rpx;
	}

	.list {
		background: #FFFFFF;
		padding: 30rpx 30rpx 0 30rpx;
		position: relative;
		margin-bottom: 20rpx;
	}

	.bottomFixs {
		
		background: #E83814;
		text-align: center;
		width: 700rpx;
		padding: 30rpx;
		position: fixed;
		bottom: 20rpx;
		left: 30rpx;
		color: #FFFFFF;
		border-radius: 100rpx;
		z-index: 999;
	}
</style>
